import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'

import router from './router'

import mitt from 'mitt'

const Mit = mitt()

// createApp() 创建一个应用实例
// app.mount() 将应用程序实例挂载在一个容器元素中。每个应用实例，mount()只能调用一次
const app = createApp(App)

type Filter = {
  format<T extends any>(str: T): string
}
// TypeScript注册,由于必须要拓展ComponnentCustomProperties类型才能获得类型提示：添加全局声明
declare module 'vue' {
  export interface ComponnentCustomProperties {
    $Bus: typeof Mit,
    $filters: Filter
  }
}
// Vue3挂载全局API
app.config.globalProperties.$Bus = Mit

app.config.globalProperties.$filters = {
  format<T extends any>(str: T): string {
    return `$${str}`
  }
}

app.use(ElementPlus, { size: 'default', zIndex: 3000 }) // Element plus 可以传入一个包含size和zIndex属性的全局配置对象。size设置表单组件的默认尺寸，zIndex设置弹出组件的层级，zIndex默认值2000
app.use(hljsVuePlugin)
app.use(router)
app.mount('#app')
